<template>
  <div>
      <!-- 从mint-ui中引入轮播图 -->
      <swiper :lunbotuList="lunbotuList" :is-full="true"></swiper>
      <!-- 从mui中引入九宫格，改造成六宫格 -->
      <ul class="mui-table-view mui-grid-view mui-grid-9">
		      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <router-link to="home/newList">
		          <img src="../../images/menu1.png" alt="">
		          <div class="mui-media-body">新闻资讯</div>
            </router-link>
          </li>
		      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <router-link to="/home/photoList">
		          <img src="../../images/menu2.png" alt="">
		          <div class="mui-media-body">图片分享</div>
            </router-link>
          </li>
		      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <router-link to="/home/goodsList">
		          <img src="../../images/menu3.png" alt="">
		          <div class="mui-media-body">商品购买</div>
            </router-link>
          </li>
		      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <a href="#">
		          <img src="../../images/menu4.png" alt="">
		          <div class="mui-media-body">留言反馈</div>
            </a>
          </li>
		      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <a href="#">
		          <img src="../../images/menu5.png" alt="">
		          <div class="mui-media-body">视频专区</div>
            </a>
          </li>
		      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <a href="#">
		          <img src="../../images/menu6.png" alt="">
		          <div class="mui-media-body">联系我们</div>
            </a>
          </li>
		  </ul> 
  </div>
</template>

<script>
import { Toast } from 'mint-ui'
import swiper from '../swiper/swiper.vue'
export default {
    data(){
      return {
        lunbotuList:[]
      }
    },
    created(){
      this.getlunbotu();
    },
    methods:{
      getlunbotu(){
        this.$http.get('api/getlunbo').then(result => {
          if(result.body.status === 0) {
            this.lunbotuList = result.body.message;
          } else {
            Toast('加载失败');
          }
        })
      }
    },
    components: {
      swiper
    }
}
</script>

<style lang="less" scoped>

  .mui-grid-view {
      background-color: #fff;
      border: none;
      .mui-table-view-cell {
        border: none;
        img {
          width: 60px;
          height: 60px;
        }
        .mui-media-body {
          font-size: 12px;
        }
      }
  }
  
</style>


